<template>
  <div id="mine">
    <div class="headercon">
      <div id="header">
        <div class="inf" @click="toLogout">
          <div class="img">
            <img src="http://image.360hwj.com/mall/J2zAA1mZH6-AQ-G_AAAEadr9AHg271.png" alt />
          </div>
          <div class="name">{{username}}</div>
        </div>
        <div class="myorder">
          <div class="title">
            <p>我的订单</p>
            <p>
              <span>查看全部订单</span>
              <van-icon name="ellipsis" />
            </p>
          </div>
          <div class="ordercons">
            <div class="ordercon">
              <img src="http://ifile.360hwj.com/wap/images/order_pay@2x.png" alt />
              <p>待付款</p>
            </div>
            <div class="ordercon">
              <img src="http://ifile.360hwj.com/wap/images/order_pay@2x.png" alt />
              <p>待付款</p>
            </div>
            <div class="ordercon">
              <img src="http://ifile.360hwj.com/wap/images/order_pay@2x.png" alt />
              <p>待付款</p>
            </div>
            <div class="ordercon">
              <img src="http://ifile.360hwj.com/wap/images/order_pay@2x.png" alt />
              <p>待付款</p>
            </div>
          </div>
        </div>
        <div class="toptools">
          <van-icon name="comment-o" />
          <van-icon name="setting-o" />
        </div>
      </div>
    </div>
    <div class="tools">
      <div class="tooltitle">必备工具</div>
      <div class="toolcons">
        <div class="toolcon" v-for="item in toolicon" :key="item.icon">
          <van-icon :name="item.icon" />
          <p v-html="item.name"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      toolicon: [
        {
          icon: "pending-payment",
          name: "我的钱包"
        },
        {
          icon: "coupon-o",
          name: "我的优惠券"
        },
        {
          icon: "coupon-o",
          name: "我的足迹"
        },
        {
          icon: "star-o",
          name: "我的收藏"
        },
        {
          icon: "map-marked",
          name: "我的地址"
        },
        {
          icon: "comment-o",
          name: "联系客服"
        },
        {
          icon: "refund-o",
          name: "分享领钱"
        },
        {
          icon: "diamond-o",
          name: "会员中心"
        },
        {
          icon: "envelop-o",
          name: "意见反馈"
        }
      ],
      username: this.$store.state.common.user.phone
    };
  },
  methods: {
    toLogout() {
      this.$router.push("/logout");
    }
  }
};
</script>
<style lang="scss" scoped>
#mine {
  width: 10rem;
  margin: 0 auto;
  background: #f6f6f6;
  .headercon {
    height: 10.8rem;
  }
  #header {
    position: relative;
    background: url(http://ifile.360hwj.com/wap/images/personal_bg@2x.png)
      no-repeat center center;
    background-size: 100% 100%;
    height: 7.333333rem;
    .inf {
      position: absolute;
      top: 1.76rem;
      left: 0.426667rem;
      width: 5.386667rem;
      height: 1.973333rem;
      display: flex;
      .img {
        width: 1.933333rem;
        height: 1.933333rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        font-size: 0.426667rem;
        color: #fff;
        margin-top: 0.4rem;
        margin-left: 0.4rem;
      }
    }
    .myorder {
      position: absolute;
      top: 6.533333rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      width: 9.4rem;
      border-radius: 0.133333rem;
      .title {
        display: flex;
        justify-content: space-between;
        padding: 0 0.4rem;
        height: 1.466667rem;
        line-height: 1.466667rem;
        border-bottom: 1px solid #f6f6f6;
        p:nth-child(1) {
          font-size: 0.44rem;
        }
        p:nth-child(2) {
          font-size: 0.346667rem;
          color: #999;
          .van-icon {
            margin-left: 0.066667rem;
            font-size: 0.4rem;
          }
        }
      }
      .ordercons {
        height: 2.426667rem;
        display: flex;
        justify-content: space-around;
        .ordercon {
          width: 24%;
          text-align: center;
          img {
            margin-top: 0.8rem;
            margin-bottom: 0.066667rem;
            width: 0.586667rem;
            height: 0.586667rem;
          }
        }
      }
    }
    .toptools {
      position: absolute;
      top: 0.426667rem;
      right: 0;
      .van-icon {
        font-size: 0.613333rem;
        color: #fff;
        margin-right: 0.293333rem;
      }
    }
  }
  .tools {
    background-color: #fff;

    .tooltitle {
      height: 1.466667rem;
      font-size: 0.426667rem;
      border-bottom: 1px solid #f6f6f6;
      line-height: 1.466667rem;
      padding-left: 0.8rem;
    }
    .toolcons {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 2.133333rem;
    }
    .toolcon {
      width: 33.333%;
      text-align: center;
      font-size: 0.373333rem;
      margin-top: 0.693333rem;
      p {
        margin-top: 0.453333rem;
        line-height: 0.373333rem;
      }
      .van-icon {
        font-size: 0.533333rem;
      }
    }
  }
}
</style>